import { Form, Modal, Row, Col, Flex, Avatar } from 'antd';
import React from 'react';
import { UserOutlined, EditOutlined } from '@ant-design/icons';
import styles from './index.less';
import manAvatar from '@/assets/avatar/default-avatar-man.png';
import womanAvatar from '@/assets/avatar/default-avatar-woman.png';
const Profile = function Profile(props) {
  const { visible, onClose, onEdit, currentUser = {}, currentUserLoading } = props;

  const dataLoading = currentUserLoading || !(currentUser && Object.keys(currentUser).length);
  const editPer = () => {
    onEdit()
  }
  return (
    <Modal
      className={styles.personCard}
      visible={visible}
      onCancel={onClose}
      title='个人设置'
      footer={null}
      header={null}
      width="30%"
      bodyStyle={{ minHeight: '60vh', display: 'flex', flexDirection: 'column' }}
    >
      {
        //  (
        !dataLoading && (
          <div>
            <div className={styles.personPic} >
              {
                currentUser.photo
                  ? <Avatar style={{ width: '100%', height: '100%' }} src={`data:image/png;base64,${currentUser.photo}`} />
                  : <Avatar style={{ width: '100%', height: '100%', fontSize: '80px' }} size={64} src={currentUser.tuSex === 'M' ? manAvatar : womanAvatar} />
              }
              {/* <EditOutlined style={{ fontSize: '20px' }} className={styles.editIcon} /> */}
            </div>


            <div className={styles.cardMes}>
              <div className={styles.personName}>{currentUser.tuCname}</div>
              <div className={styles.personInfo}>
                <div>
                  <span>{currentUser && currentUser.tuSex === 'M' ? '男' : '女'}</span>
                  <span>性别</span>
                </div>
                |
                <div>
                  <span>{currentUser.tuBirth}</span>
                  <span>出生日期</span>
                </div>
                |
                <div>
                  <span>{currentUser.userId}</span>
                  <span>工号</span>
                </div>
              </div>
              <ul>
                <li><span className={styles.cardItemTitle}>部门：</span><span className={styles.cardItemCont}>{currentUser.deptName}</span></li>
                <li><span className={styles.cardItemTitle}>航站：</span><span className={styles.cardItemCont}>{currentUser.airport}</span></li>
                <li><span className={styles.cardItemTitle}>职位：</span><span className={styles.cardItemCont}></span></li>
                <li><span className={styles.cardItemTitle}>电话：</span><span className={styles.cardItemCont}>{currentUser.tuMobile}</span></li>
                <li><span className={styles.cardItemTitle}>邮箱：</span><span className={styles.cardItemCont}>{currentUser.tuEmail}</span></li>
              </ul>
            </div>
          </div>
        )
      }


    </Modal>
  );
};

export default Form.create()(Profile);
